import React, { Component } from 'react';
import classNames from 'classnames';
import './index.scss';

export default class Steps extends Component {
  render() {
    let { steps, currentIndex, cantBack } = this.props;

    return (
        <div className={classNames('steps', { 'cant-back' : cantBack })}>
          {
            steps.map((step, index) => {
              return (
                <div 
                  className={classNames('step', { active: index === currentIndex, past: index < currentIndex })} 
                  style={{width: `${Math.floor(100 / steps.length)}%` }} 
                  key={index}
                >
                  <div className="step-index"><span>{index+1}</span></div>
                  <div className="step-text">{step.text}</div>
                </div>
              )
            })
          }
        </div>
    )
  }
}
